<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 800px;
        height: 800px;
        background-color: grey;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-bottom: 150px;

        /* 简写animation */
        animation: item 2s infinite;

        /* 动画名称，必须要先设置关键帧 */
        /* animation-name: item; */
        /* 动画持续时长 */
        /* animation-duration: 2s; */
        /* 动画延时 */
        /* animation-delay: 2s; */
        /* 动画执行次数 n/i */
        /* animation-iteration-count: 2/infinite（无限播放） */
        /* animation-iteration-count: 2; */
        /* 
          animation-direction 指定动画执行的方向
            normal  默认值 from=>to   每次都这样
            reverse to=>from  每次都这样
            alternate from=>to  反方向 重复执行时反向执行
            alternate-reverse to=>from  重复执行时反向执行

        */
        /* animation-direction: alternate-reverse; */
        /*
          animation-play-state 设置动画执行状态
            normal  默认值 动画正常执行
            paused  动画暂停
         */
        /* animation-play-state: paused; */
        /* 
          animation-fill-mode:动画的填充模式
            none  默认值 动画执行完毕回到原来位置
            forwards  动画执行完毕停止在动画结束的位置(to的位置)
            backwords 动画延迟等待是 元素处于开始位置（from的位置）
            both 结合forwards和backwords的特点
        */
        /* animation-fill-mode: none; */
      }
      .box3 {
        width: 100px;
        height: 100px;
        background-color: springgreen;
      }
      .box1:hover .box2 {
        animation-play-state: paused;
      }

      @keyframes item {
        form {
          margin-left: 0;
        }
        to {
          margin-left: 700px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>
